<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TSDProxy</title>

  <link rel="stylesheet" href="styles.css" type="text/css">
  <script src="scripts.js" defer type="module"></script>
</head>

<body data-signals-dark="false" data-persist="dark"
  data-attr-data--theme="$dark?'tsdproxy-dark':'tsdproxy-light'"
  data-on-keydown__window="evt.ctrlKey && evt.key === 'f' && (evt.preventDefault(), document.getElementById('searchInput').focus())">
  <nav class="navbar bg-base-300 dark:bg-base-200 shadow-md">
    <div class="navbar-start">
      <a href="/" class="flex-0 btn btn-ghost gap-1 px-2 md:gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="25 25 100 100" fill="none" class="h-8 w-8">
          <circle cx="75" cy="75" r="50" fill="#4A90E2" />
          <circle cx="75" cy="55" r="5" fill="#FFFFFF" />
          <circle cx="95" cy="75" r="5" fill="#FFFFFF" />
          <circle cx="75" cy="95" r="5" fill="#FFFFFF" />
          <circle cx="55" cy="75" r="5" fill="#FFFFFF" />
          <line x1="75" y1="55" x2="95" y2="75" stroke="#FFFFFF" stroke-width="2" />
          <line x1="95" y1="75" x2="75" y2="95" stroke="#FFFFFF" stroke-width="2" />
          <line x1="75" y1="95" x2="55" y2="75" stroke="#FFFFFF" stroke-width="2" />
          <line x1="55" y1="75" x2="75" y2="55" stroke="#FFFFFF" stroke-width="2" />
        </svg>
        <span class="font-title text-base-content text-lg">TSDProxy</span>
      </a>
    </div>
    <div class="navbar-end gap-4">

      <label class="input hidden md:flex min-w-50">
        <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </g>
        </svg>
        <input id="searchInput" data-bind-search placeholder="Search..." type="search" class="grow" tabindex="0" />
        <kbd class="kbd kbd-sm">ctrl</kbd>
        <kbd class="kbd kbd-sm">f</kbd>
      </label>
      <a class="btn btn-ghost hidden sm:inline-flex"
        href="https://almeidapaulopt.github.io/tsdproxy/docs/">Documentation</a>
      <a class="btn btn-secondary btn-xs hidden sm:inline-flex" href="https://buymeacoffee.com/almeidapaulopt"
        target="_blank" rel="noopener noreferrer">Become
        a Sponsor</a>

      <label class="cursor-pointer gap-2 hidden sm:inline-flex">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="5" />
          <path
            d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
        </svg>
        <input type="checkbox" class="toggle theme-controller" data-bind-dark aria-label="theme switch" />
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
      </label>

      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar border"
          data-signals="{user_username:'', user_displayName:'', user_profilePicUrl:''}"
          data-class-hidden="!$user_username" aria-label="avatar">
          <div class="w-8 h-8 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-neutral"
              data-class-hidden="$user_profilePicUrl">
              <path stroke-width="0"
                d="M20.5,14.5V16H19V14.5H20.5M18.5,9.5H17V9A3,3 0 0,1 20,6A3,3 0 0,1 23,9C23,9.97 22.5,10.88 21.71,11.41L21.41,11.6C20.84,12 20.5,12.61 20.5,13.3V13.5H19V13.3C19,12.11 19.6,11 20.59,10.35L20.88,10.16C21.27,9.9 21.5,9.47 21.5,9A1.5,1.5 0 0,0 20,7.5A1.5,1.5 0 0,0 18.5,9V9.5M9,13C11.67,13 17,14.34 17,17V20H1V17C1,14.34 6.33,13 9,13M9,4A4,4 0 0,1 13,8A4,4 0 0,1 9,12A4,4 0 0,1 5,8A4,4 0 0,1 9,4M9,14.9C6.03,14.9 2.9,16.36 2.9,17V18.1H15.1V17C15.1,16.36 11.97,14.9 9,14.9M9,5.9A2.1,2.1 0 0,0 6.9,8A2.1,2.1 0 0,0 9,10.1A2.1,2.1 0 0,0 11.1,8A2.1,2.1 0 0,0 9,5.9Z" />
            </svg>
            <img class="rounded-full" data-attr-src="$user_profilePicUrl" class="fill-neutral"
              data-class-hidden="!$user_profilePicUrl" />
          </div>
        </div>
        <div tabindex="0" class="menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
          data-class-hidden="!$user_username">
          <p data-text="$user_displayName"></p>
          <p data-text="$user_username"></p>
        </div>

        <div class="dropdown sm:hidden">
          <div tabindex="0" role="button" class="btn btn-ghost btn-circle" aria-label="sandwich button">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
            </svg>
          </div>
          <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
            <li>
              <a href="https://almeidapaulopt.github.io/tsdproxy/docs/">Documentation</a>
            <li><a class="bg-secondary" href="https://buymeacoffee.com/almeidapaulopt" target="_blank"
                rel="noopener noreferrer">Become
                a Sponsor</a>
            </li>
            <li>
              <label class="flex cursor-pointer gap-2 ">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="5" />
                  <path
                    d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
                </svg>
                <input type="checkbox" class="toggle theme-controller" data-bind-dark
                  aria-label="theme switch" />
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </svg>
              </label>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <main data-on-load="@get('/stream')">
    <div id='proxy-list'></div>
  </main>

  <footer class="footer sm:footer-horizontal bg-base-300 dark:bg-base-200 px-10 py-4 mt-8">
    <aside>
      <img src="/icons/tsdproxy.svg" alt="TSDProxy Logo" />
      <p>
        TSDProxy by <strong>Paulo Almeida</strong> <br /> with the help of our
        <a href="https://github.com/almeidapaulopt/tsdproxy/graphs/contributors" target="_blank"
          rel="noopener noreferrer">contributors</a>.
      </p>
    </aside>
    <nav class="grid-flow-col gap-10 sm:place-self-center sm:justify-self-end">
      <a href="https://github.com/almeidapaulopt/tsdproxy/graphs/contributors" target="_blank"
        rel="noopener noreferrer">
        <img class="h-5 fill-current" src="/icons/sh/github.svg" alt="github logo" />
      </a>
      <a href="https://github.com/almeidapaulopt/tsdproxy/graphs/contributors" target="_blank"
        rel="noopener noreferrer">
        <img class="h-5 fill-current" src="/icons/sh/x.svg" alt="X logo" />
      </a>
    </nav>
  </footer>
</body>

</html>
